<template>
  <div class="app-container">
    <el-table
      :data="connectTypeList"
      style="width: 100%;"
    >

      <el-table-column :label="$t('id')" >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.connectId"
            :disabled="!scope.row.isAdd"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('name')" >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
          />
        </template>
      </el-table-column>
      <el-table-column >
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addConnectType">{{ $t('add') }}</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="addOrUpdateConnectType(scope.row)"
          >{{ $t('save') }}</el-button>
          <el-button
            v-if="!scope.row.isAdd"
            type="danger"
            @click="delConnectType(scope.row)"
          >{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {
  failureNotice,
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  insertTemplateDeviceSensorHardwareConnectType,
  deleteTemplateDeviceSensorHardwareConnectType,
  updateTemplateDeviceSensorHardwareConnectType,
  listTemplateDeviceSensorHardwareConnectType
} from '@/api/iot/iotTemplateDeviceSensorHardwareConnectTypeApi'
export default {
  name: 'ConnectType',
  data() {
    return {
      connectTypeList: []
    }
  },
  created() {
    this.listTemplateDeviceSensorHardwareConnectType()
  },
  methods: {
    listTemplateDeviceSensorHardwareConnectType() {
      listTemplateDeviceSensorHardwareConnectType({
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.connectTypeList = data
        } else {
          this.connectTypeList = []
        }
      })
    },
    addConnectType() {
      for (let i = 0, j = this.connectTypeList.length; i < j; i++) {
        if (this.connectTypeList[i].isAdd) {
          return
        }
      }
      const item = {
        id: 0,
        name: '',
        isAdd: true
      }
      this.connectTypeList.push(item)
    },
    addOrUpdateConnectType(item) {
      const json = {
        ...item,
        regionId: this.regionId
      }

      if (item.isAdd) {
        insertTemplateDeviceSensorHardwareConnectType(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listTemplateDeviceSensorHardwareConnectType()
            this.$emit('change', {})
          }
        })
      } else {
        updateTemplateDeviceSensorHardwareConnectType(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listTemplateDeviceSensorHardwareConnectType()
            this.$emit('change', {})
          }
        })
      }
    },
    delConnectType(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteTemplateDeviceSensorHardwareConnectType({
            connectTypeId: item.connectTypeId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listTemplateDeviceSensorHardwareConnectType()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>
